<template>
  <avue-crud ref="crudRef"  :option="option" :data="data" 
    @on-load="getList" />
  <el-pagination background layout="prev, pager, next,sizes" :total="page.total" :current-page="page.currentPage"
    :page-size="page.pageSize" @update:current-page="handleCurrentPageChange"
    @update:page-size="handlePageSizeChange" :page-sizes="[5, 10, 20]" />
</template>
<script setup>
import http2 from "@/api/http2";
import { ref } from "vue";
//获取this
const option = ref(null);
const data = ref([]);
const page = ref({});
page.value = {
  total: 20,
  currentPage: 1,
  pageSize: 10
};
const handleCurrentPageChange = async newPage => {
  page.value.currentPage = newPage;
  getList()

};
const handlePageSizeChange = async newSize => {
  page.value.pageSize = newSize;
  getList()

};
const props = defineProps({
  url: String,
  method: {
    type: String,
    default: "get"
  },
  params: {
    type: Object,
    default: () => {
      return {};
    }
  },
  column: {
    type: Array,
    default: () => {
      return [];
    }
  },
  option: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
option.value = {
  header: false,
  addBtn: false,
  height: "40vh",
  index: false,
  page: false,
  delBtn: false,
  editBtn: false,
  menu: false,
  minWidth: 100,
  ...props.option,
  column: props.column
};
function setList(arr) {
  console.log("设置数据", arr);
  if (Array.isArray(arr)) {
    data.value = arr;
    console.log("设置数据", arr);
  }
}
function getList() {
  if (props.url == undefined) return;
  try {
    if (props.method == "post") {
      let data = props.params;
      
      http2
        .post(props.url, data, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          console.log(res);
          setList(res.data.data);
        });
    } else {
      console.log('这里获取到了', props.params)
      http2
        .get(
          `${props.url}?page=${page.value.currentPage}&count=${page.value.pageSize}`
        )
        .then(res => {
          console.log("data", res.data.data);
          page.value.total = res.data.count;
          setList(res.data.data);
        });
    }
  } catch (error) {
    console.log(error);
  }
}

</script>
